<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Classes</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/main.css" >
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="./js/moment.min.js"></script>
    <script type="text/javascript">

    </script>
</head>
<body>
    <div id="header">
            
    </div><!-- header -->
    
    <div class="container">
        <div class="main-left">
        <div class="main-right">
            <div class="main">
                <div class="nav">
                    <ul>
                        <li>
                            <a id="tab" href="#">Classes</a>
                            <span class="courses-button">▼</span>
                            <ul class="courses-dd" id="">
                                <li><a href="#">Software Engineering</a></li>
                                <li><a href="#">Operating Systems</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Schedule</a></li>
                        <li><a href="#">Help</a></li>
                    </ul>
                    <div class="usernav">
                        <a href="#" id="account-drop">
                            <img src="images/icons/user2-16.png" alt=" "/>AccountName
                            <span id="account-drop-down">▼</span>
                        </a>
                        <ul id="drop-down">
                            <li>
                                <a href="#" id="change-password">Change password</a>
                             </li>
                            <li>
                                <a href="#" id="change-email">Change email</a>
                            </li>
                            <li>
                                <a href="#" id="logout">Logout</a>
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                </div><!-- nav end-->
                
                <div class="content">
                    <div class="offset">
                        <div class="left">
                            <table class="crumbs">
                                <tbody>
                                    <tr>
                                        <!-- change java code here -->
                                        <td class="first">
                                            <a href="#">
                                                Classes
                                            </a>
                                        </td>
                                        <td>→</td>
                                        <td class="last"><em>Manage classes</em></td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="page-left">
                                <h2 class="">Lecture times</h2>
                                <div class="lecture-header">
                                    <div class="sort">
                                        Sort by:
                                        <select id="sort">
                                            <option value="1">Room</option>
                                            <option value="2">Course name</option>
                                            <option value="3">Teacher name</option>
                                            <option value="4">Start time</option>
                                            <option value="5">End time</option>
                                        </select>
                                    </div>
                                    <div class="running">
                                        <label for="running">Current running</label>
                                        <input type="checkbox" name="running" id="running"/>
                                    </div>
                                    <button class="btn-refresh">
                                        <span>
                                            refresh
                                        </span>
                                    </button>
                                </div>
                                <table class="lecture">
                                    <thead>
                                    <tr>
                                        <th>
                                            Room
                                        </th>
                                        <th>
                                            Course name
                                        </th>
                                        <th>
                                            Teacher name
                                        </th>
                                        <th>
                                            Start time
                                        </th>
                                        <th>
                                            End time
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody id="list">
                                    <tr>
                                        <td>
                                            A2
                                        </td>
                                        <td>
                                            CSS123 Software Engineering
                                        </td>
                                        <td>
                                            Adilbek Zhaxalykov
                                        </td>
                                        <td>
                                            11:00
                                        </td>
                                        <td>
                                            13:00
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            A2
                                        </td>
                                        <td>
                                            CSS123 Software Engineering
                                        </td>
                                        <td>
                                            Adilbek Zhaxalykov
                                        </td>
                                        <td>
                                            11:00
                                        </td>
                                        <td>
                                            13:00
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            A2
                                        </td>
                                        <td>
                                            CSS123 Software Engineering
                                        </td>
                                        <td>
                                            Adilbek Zhaxalykov
                                        </td>
                                        <td>
                                            11:00
                                        </td>
                                        <td>
                                            13:00
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            A2
                                        </td>
                                        <td>
                                            CSS123 Software Engineering
                                        </td>
                                        <td>
                                            Adilbek Zhaxalykov
                                        </td>
                                        <td>
                                            11:00
                                        </td>
                                        <td>
                                            13:00
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="right-fade">
                            <div class="right-time">
                                <span id="time" class="time round-3">

                                </span>
                            </div>
                            <div class="right-classes">
                                <h2>Your classes</h2>
                                <ul class="courses_ul">
                                    <li class="course_li" id="course_123123">
                                        <a id="course_1223" class="course" href="#">
                                        Software Engineering
                                        </a>
                                    </li>
                                    <li class="course_li" id="course_13123">
                                        <a id="course_3123" class="course" href="#">
                                        Operating Systems
                                        </a>
                                    </li>
                                </ul>
                                <div class="clear"></div>
                                <a href="#">Add a class</a>
                                <div class="clear"></div>
                            </div>
                            <div class="clear"></div>
                            <div class="right-extras">
                                <h2>Support</h2>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>

            </div>
            <div class="clear"></div>
        </div>
        </div>
        <div class="clear"></div>
        <div class="shadow"></div>
        <div class="pass-popup">
            <div class="pass-item">
                <label for="oldpass">Old password</label>
                <input type="password" id="oldpass" name="oldpass" class="input"/>
            </div>
            <div class="pass-item">
                <label for="newpass">New password</label>
                <input type="password" id="newpass" name="newpass" class="input"/>
            </div>
            <div class="pass-item">
                <label for="confpass">Confirm password</label>
                <input type="password" id="confpass" name="confpass" class="input"/>
            </div>
            <div class="pass-options">
                <button type="submit" class="btn-green" id="pass-submit">
                    <span>
                        Change password
                    </span>
                </button>
                or
                <a href="#" id="pass-cancel">Cancel</a>
            </div>
        </div>
        <div class="email-popup">
            <div class="email-item">
                <label for="email">New email</label>
                <input type="password" id="email" name="email" class="input"/>
            </div>
            <div class="email-options">
                <button type="submit" class="btn-green" id="email-submit">
                    <span>
                        Change email
                    </span>
                </button>
                or
                <a href="#" id="email-cancel">Cancel</a>
            </div>
        </div>
    </div><!-- container end-->

    <div id="footer">
        
    </div>
    <script>
        $(document).ready(function() {
            var t = moment().format("MMMM Do YYYY, h:mma");
            $("#time").text(t);
            $(".courses-button").click(function() {
                $("ul .courses-dd").css("visibility", "visible");
            });
            $("ul .courses-dd").mouseleave(function() {
               $(this).css("visibility", "hidden"); 
            });
            $("#account-drop-down").click(function() {
                $("#drop-down").css("display", "block");
            });
            $("#account-drop").click(function() {
                $("#drop-down").css("display", "block");
            });
            $("#drop-down").mouseleave(function() {
                $(this).css("display", "none");
            });

            $("#change-password").click(function(ev) {
                ev.preventDefault();
                var popup = $(".pass-popup");
                var height = $(window).height();
                var width = $(window).width();
                var popHeight = popup.height();
                var popWidth =  popup.width();
                $(".shadow").css("display", "block");
                popup.css({
                    "display": "block",
                    "left": (width - popWidth) / 2,
                    "top": Math.max((height - popHeight) / 3, 20),
                    "position": "absolute"
                });
            });

            $("#pass-cancel").click(function(ev) {
                ev.preventDefault();
                $(".pass-popup").css("display", "none");
                $(".shadow").css("display", "none");
            });

            $("#pass-submit").click(function(ev) {
                ev.preventDefault();
                var oldpass = $("input[name=oldpass]").val();
                var newpass = $("input[name=newpass]").val();
                var confpass = $("input[name=confpass]").val();
                $.ajax({});
                $(".pass-popup").css("display", "none");
                $(".shadow").css("display", "none");
            });

            $("#change-email").click(function(ev){
                ev.preventDefault();
                var popup = $(".email-popup");
                var height = $(window).height();
                var width = $(window).width();
                var popHeight = popup.height();
                var popWidth =  popup.width();
                $(".shadow").css("display", "block");
                popup.css({
                    "display": "block",
                    "left": (width - popWidth) / 2,
                    "top": Math.max((height - popHeight) / 3, 20),
                    "position": "absolute"
                });
            });

            $("#email-submit").click(function(ev) {
                ev.preventDefault();
                var email = $("input[name=email]").val();
                $.ajax({});
                $(".email-popup").css("display", "none");
                $(".shadow").css("display", "none");
            });

            $("#email-cancel").click(function(ev) {
                ev.preventDefault();
                $(".email-popup").css("display", "none");
                $(".shadow").css("display", "none");
            });

            $("#logout").click(function(){

            });

        });
    </script>
</body>
</html>